<script setup lang="ts">
import { reactive } from 'vue'

// 定义参数
// const props = defineProps({
//   demo: {
//     type: Boolean,
//     default: false,
//   },
// })

// 定义事件
// const emit = defineEmits(['ok'])

// const image = 'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg'

const detail = {
  id: 0,
  userId: 1,
  userName: '明月天涯',
  portrait:
      'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png',
  time: '今天 14:20',
  area: '广东',
  content: '明月天涯明月天涯明月天涯明月天涯明月天涯明月天涯明月天涯',
  imageList: [
    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
    'https://storage.360buyimg.com/jdc-article/fristfabu.jpg',
  ],
  commentList: [
    {
      id: 1,
      userId: 2,
      userName: '天涯',
      portrait:
          'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png',
      time: '昨天 14:20',
      area: '辽宁',
      content: '明月天涯明月天涯明月天涯明月天涯明月天涯明月天涯明月天涯',
    },
    {
      id: 2,
      userId: 3,
      userName: '明月',
      toUserName: '天涯',
      portrait:
          'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png',
      time: '02-20',
      area: '安徽',
      content: '明月天涯明月天涯明月天涯明月天涯明月天涯明月天涯明月天涯',
    },
  ],
}

// 状态参数
const state = reactive({
  activeTab: 0,
  showFunction: false,
})

// 显示/隐藏功能键
function trigger() {
  state.showFunction = !state.showFunction
}

// 图片预览
function preview(index: number) {
  uni.previewImage({
    urls: detail.imageList,
    current: index,
  })
}

// 点击回复
function reply(row: any) {
  window.console.log(row)
}
</script>

<template>
  <view class="commnent-content">
    <nut-tabs v-model="state.activeTab" background="#fff">
      <nut-tab-pane title="热门评论" />
      <nut-tab-pane title="最新评论" />
    </nut-tabs>
    <view class="comment-item">
      <view class="user-info">
        <nut-avatar size="normal">
          <image :src="detail.portrait" mode="aspectFill" />
        </nut-avatar>
        <view class="info">
          <view class="name">
            {{ detail.userName }}
          </view>
          <view class="comment">
            {{ detail.content }}
          </view>
          <view
            v-if="detail.imageList && detail.imageList.length"
            class="image-list"
            :class="`images-${detail.imageList.length}`"
          >
            <view
              v-for="(image, index) in detail.imageList"
              :key="index"
              class="image-item"
              @click="preview(index)"
            >
              <image :src="image" mode="aspectFill" />
            </view>
          </view>
          <view class="footer">
            <view class="action">
              <view class="time">
                {{ detail.time }} · {{ detail.area }}
              </view>
              <view class="reply">
                回复
              </view>
            </view>
            <view class="thumbs" @click="trigger">
              <nut-icon name="fabulous" />
              <text class="number">
                30
              </text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="comment-list">
      <view
        v-for="item in detail.commentList"
        :key="item.id"
        class="comment-item"
        @click="reply(item)"
      >
        <view class="user-info">
          <nut-avatar size="normal">
            <image :src="item.portrait" mode="aspectFill" />
          </nut-avatar>
          <view class="info">
            <view class="name">
              {{ item.userName }}
              <view class="time">
                {{ item.time }}
              </view>
            </view>
            <view class="comment">
              <span v-if="item.toUserName">
                回复
                <span class="c-name">
                  {{ item.toUserName }}
                </span>
                ：
              </span>
              {{ item.content }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .nut-tab-pane {
    padding: 0;
  }
  .commnent-content {
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.8);
    padding: 0 32rpx;

    .comment-item {
      padding: 18rpx 0;

      .user-info {
        display: flex;
        font-size: 28rpx;

        .portrait {
          border-radius: 50%;

          image {
            border-radius: 50%;
            width: 80rpx;
            height: 80rpx;
          }
        }

        .info {
          margin-left: 24rpx;

          .name {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6rpx;
            font-weight: 600;

            .time {
              font-weight: normal;
              font-size: 24rpx;
              color: rgba(180, 180, 180, 1);
            }
          }

          .comment {
            line-height: 40rpx;
          }

          .image-list {
            margin-top: 12rpx;
            display: flex;
            flex-wrap: wrap;

            .image-item {
              width: 186rpx;
              height: 186rpx;
              margin: 0 12rpx 12rpx 0;

              image {
                border-radius: 4rpx;
                width: 186rpx;
                height: 186rpx;
              }
            }

            .image-item:nth-of-type(3n) {
              margin-right: 0;
            }
            &.images-1 {
              .image-item {
                width: 100%;
                image {
                  width: 100%;
                }
              }
            }
          }

          .footer {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .action {
              display: flex;
              margin-bottom: 4rpx;
              font-size: 24rpx;

              .time {
                color: #999;
              }

              .reply {
                color: #000;
                padding: 0 20rpx;
              }
            }

            .thumbs {
              display: flex;
              align-items: center;
              font-size: 26rpx;
              color: #666;
              .number {
                padding-left: 5rpx;
              }
              &.active {
                color: $uni-color-primary;
              }
            }
          }
        }
      }
    }

    .comment-list {
      padding: 12rpx 20rpx;
      background: rgba(0, 0, 0, 0.03);
      border-radius: 8rpx;

      .comment-item {
        .user-info {
          .portrait {
            image {
              width: 64rpx;
              height: 64rpx;
            }
          }

          .info {
            .comment {
              line-height: 32rpx;
              .c-name {
                color: $uni-color-primary;
                font-weight: 600;
              }
            }
          }
        }
      }
    }
  }
</style>
